import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';

import {
  Navbar,
  HText,
  Divider,
  CardConfirm,
  CardConfirmOuter,
  Modal,
  Button,
} from '../../DodLibrary/index';

class ModalPage extends Component {

  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View
        style={styles.container}>
        <Modal.RippleModal
          ref={ref => { this._RippleModal1 = ref; }}>
          <CardConfirm
            title="Inuyasha"
            content="Are you OK? Jack Ma."
            bottomTitles={['No', 'Ok']}
            bottomFuncs={[() => this._RippleModal1.close(), () => {}]}
            rippleColor="#d22222"
          />
        </Modal.RippleModal>
        <Modal.RippleModal
          ref={ref => { this._RippleModal2 = ref; }}>
          <CardConfirmOuter
            title="Inuyasha"
            content="Are you OK? Jack Ma."
            bottomTitles={['No', 'Ok']}
            bottomFuncs={[() => this._RippleModal2.close(), () => {}]}
            rippleColor="#d22222"
          />
        </Modal.RippleModal>
        <Navbar
          title="Modal"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>
          <Divider />
          <Divider />
          <Divider />
          <Button.Opacity onPress={() => this._RippleModal1.open()}>
            ripple modal with card
          </Button.Opacity>

          <Divider />
          <Divider />
          <Divider />
          <Button.Opacity onPress={() => this._RippleModal2.open()}>
            more card like
          </Button.Opacity>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ModalPage;

